<template>
  <div class="team-info">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="用户管理" name="first">
        <el-row :gutter="0">
          <el-col :span="7" class="title-col">职位</el-col>
          <el-col :span="17">133366.7825万人民币</el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="7" class="title-col">工作经历</el-col>
          <el-col :span="17">133366.7825万人民币</el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="7" class="title-col">教育经历</el-col>
          <el-col :span="17">133366.7825万人民币</el-col>
        </el-row>
        <el-row :gutter="0" class="lg-row">
          <el-col :span="7" class="title-col">经营范围</el-col>
          <el-col :span="17">133366.7825万人民币</el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="24" class="title-col center-col">创业经历</el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="6" class="title-col">公司名称</el-col>
          <el-col :span="3" class="title-col">行业</el-col>
          <el-col :span="3" class="title-col">地点</el-col>
          <el-col :span="3" class="title-col">获投状态</el-col>
          <el-col :span="3" class="title-col">成立时间</el-col>
          <el-col :span="6" class="title-col">一句话介绍</el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="6">{{ '公司名称' || '/' }}</el-col>
          <el-col :span="3">{{ '行业' || '/' }}</el-col>
          <el-col :span="3">{{ '地点' || '/' }}</el-col>
          <el-col :span="3">{{ '获投状态' || '/' }}</el-col>
          <el-col :span="3">{{ '成立时间' || '/' }}</el-col>
          <el-col :span="6">{{ '一句话介绍' || '/' }}</el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "TeamInfo",
  data() {
    return {
      activeName: 'first'
    }
  }
}
</script>

<style lang="scss">
  .team-info {
    .el-tabs__nav, .el-tabs__header {
      border: none !important;
      margin-bottom: 0;
    }
    .el-tabs__item {
      background: #F9FAFC;
      margin-right: 2px;
      border: solid 1px #D0D4DE;
      border-bottom: none;
      border-radius: 2px 2px 0px 0px;
      &:first-child {
        border-left: solid 1px #D0D4DE !important;
      }
      &.is-active {
        background: none;
        border-color: #D0D4DE;
      }
    }
    .el-row {
      min-height: 40px;
      height: auto;
      border-top: solid 1px #dbedfc;
      &.lg-row {
        .el-col {
          min-height: 79px;
        }
      }
      .title-col {
        height: 100%;
        background-color: #eef6fd;
      }
      .center-col {
        justify-content: center;
      }
      .el-col {
        height: 100%;
        min-height: 40px;
        padding: 5px 20px;
        border-left: solid 1px #DCEDFC;
        font-size: 14px;
        color: #242424;
        display: flex;
        align-items: center;
        line-height: 20px;
        &:last-child {
          border-right: solid 1px #DCEDFC;
        }
      }
      &:last-child {
        border-bottom: solid 1px #DCEDFC;
      }
    }
  }
</style>
